<template>
  <div class="user">
    <div class="user_wrapper" v-if="!isError">
      <div class="left_wrapper">
        <div class="userinfo_box">
          <!-- 显示用户头像 -->
          <div class="user_avatar">
            <img :src="userinfo.avatar" alt class="avatar" />
          </div>
          <!-- 显示用户基本信息 -->
          <div class="user_info">
            <div class="username">
              <h1>{{userinfo.username}}</h1>
            </div>
            <div class="email_introduction_box">
              <div class="email">
                <i class="iconfont icon-youxiang"></i>
                <span class="content">{{userinfo.email}}</span>
              </div>
              <div class="introduction">
                <i class="iconfont icon-idcard-fill"></i>
                <span class="content">{{userinfo.introduction}}</span>
              </div>
            </div>
          </div>
          <!-- 编辑信息按钮 -->
          <div class="to_change_info">
            <div class="small_info_box">
              <div class="followee_box">
                <div class="num">{{this.userfollow.followerNum}}</div>
                <div>关注了</div>
              </div>
              <div class="follower_box">
                <div class="num">{{this.userfollow.followeeNum}}</div>
                <div>关注者</div>
              </div>
              <div class="small_info_btn">
                <Button
                  :type="!this.userinfo.isfollow ? 'default':'primary'"
                  v-if="!changeBtn"
                  @click="changeFollow(userinfo.isfollow,userinfo.uid)"
                >{{!this.userinfo.isfollow ? '关注' :'已关注'}}</Button>
                <Button type="primary" v-if="!!changeBtn" @click="editorInfo()">编辑信息</Button>
              </div>
            </div>
            <Button
              :type="!this.userinfo.isfollow ? 'default':'primary'"
              long
              class="large_info_box"
              @click="changeFollow(userinfo.isfollow,userinfo.uid)"
              v-if="!changeBtn"
            >{{!this.userinfo.isfollow ? '关注' :'已关注'}}</Button>
            <Button
              type="primary"
              long
              class="large_info_box"
              v-if="!!changeBtn"
              @click="editorInfo()"
            >编辑信息</Button>
          </div>
        </div>
        <!-- 展示发布的文章和收藏夹信息 -->
        <div class="user_content">
          <UserContent :peopleid="this.peopleid" />
        </div>
      </div>
      <div class="right_wrapper">
        <AboutUser :userfollow="this.userfollow"></AboutUser>
      </div>
    </div>
    <NotFound v-if="isError" />
  </div>
</template>

<script>
import UserContent from "@/components/UserContent.vue";
import AboutUser from "@/components/AboutUser.vue";
import NotFound from "@/views/NotFound.vue";
import { mapState } from "vuex";
import editor from "mavon-editor";
export default {
  name: "user",
  components: {
    NotFound,
    AboutUser,
    UserContent
  },
  data() {
    return {
      peopleid: this.$route.params.uid,

      userinfo: {},
      userfollow: {},
      isError: false,
      loading: false //防抖节流
    };
  },
  watch: {
    $route: function(newVal, oldVal) {
      this.peopleid = newVal.params.uid;
    },
    peopleid(val) {
      this.peopleid = val;
      this.initData();
    }
  },
  computed: {
    ...mapState({
      isLogin: state => state.isAuthenticated,
      myid: state => state.user.uid
    }),
    changeBtn() {
      if (this.peopleid == this.myid && this.isLogin == true) {
        return true;
      } else if (
        (this.peopleid != this.myid && this.isLogin == true) ||
        this.isLogin == false
      ) {
        return false;
      }
    }
  },
  methods: {
    // 初始化data
    async initData() {
      this.$set(this, "userinfo", {});

      // 第一次用axios.all 试一下水。。。
      // promise.all语法只能catch一个err
      let _this = this;
      _this.$axios
        .all([
          _this.getUserInfo(_this.peopleid),
          _this.getUserFollow(_this.peopleid)
        ])
        .then(
          _this.$axios.spread(function(userinfo, userfollow) {
            // 这是用户个人信息
            // console.log(userinfo.data);
            if (userinfo.data.code == 0 && userinfo.data.data != null) {
              _this.userinfo = userinfo.data.data;
            } else {
              // 出错了
              _this.isError = !_this.isError;
            }

            // 这是用户关注信息
            // console.log(userfollow.data);
            _this.userfollow = userfollow.data.data;
          })
        )
        .catch(err => {
          console.log(err.response);
          _this.isError = !_this.isError;
        });
    },

    // 关注或取消关注用户
    changeFollow(isfollow, followeeid) {
      // 先判断是否已登录
      let uid = this.$store.state.user.uid;
      if (this.isLogin) {
        if (!this.loading) {
          let action;
          if (!isfollow) {
            // 关注
            action = "/follow";
          } else {
            // 取消关注
            action = "/unfollow";
          }
          this.$axios
            .get(action, {
              params: {
                followerid: uid,
                followeeid: followeeid
              }
            })
            .then(res => {
              if (res.data.code == 0) {
                this.userinfo.isfollow = !this.userinfo.isfollow;
              }
              this.loading = false;
            })
            .catch(err => {
              console.log(err.response);
              this.$Message.error({
                background: true,
                content: "操作失败",
                duration: 2.5
              });
            });
        } else {
          return;
        }
      } else {
        // 弹出登录框
        this.$store.dispatch("setIsToLogin", true);
      }
    },

    // 获取用户信息
    getUserInfo(peopleid) {
      // 先判断是否已登录
      let myid;
      if (!this.isLogin) {
        myid = "";
      } else {
        myid = this.myid;
      }
      return this.$axios.get("/getUserInfo", {
        params: {
          myid: myid,
          peopleid: peopleid
        }
      });
    },

    // 获取用户关注和被关注信息
    getUserFollow(peopleid) {
      return this.$axios.get("/getfollowinfo", {
        params: {
          uid: peopleid
        }
      });
    },

    editorInfo() {
      this.$router.push({ path: "/user/settings" });
    }
  },
  mounted() {
    this.initData();
  }
};
</script>

<style lang='scss'>
.user {
  .user_wrapper {
    max-width: 960px;
    margin: 1.5rem auto;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    .left_wrapper {
      width: 700px;
      margin-right: 20px;
      display: flex;
      flex-direction: column;
      .userinfo_box {
        display: flex;
        padding: 1.5rem;
        justify-content: center;
        background-color: #ffffff;
        // height: 10rem;
        // 用户头像
        .user_avatar {
          display: flex;
          justify-content: center;
          align-items: center;
          img {
            width: 5.5rem;
            height: 5.5rem;
            border-radius: 8px;
            object-fit: cover;
          }
        }
        // 用户基本信息
        .user_info {
          display: flex;
          flex-direction: column;
          flex: 1;
          margin: 0 1.5rem;
          overflow: hidden;
          height: 6rem;
          // background-color: #ddd;
          .username {
            font-weight: 700;
            color: #000;
          }
          .email_introduction_box {
            display: flex;
            flex-direction: column;

            flex: 1;
            line-height: 1.5;
            .iconfont {
              margin-right: 0.5rem;
              font-size: 16px;
            }
            .email {
              margin-top: 0.5rem;
              display: flex;
              font-size: 1rem;
              color: #72777b;
              overflow: hidden;
              align-items: baseline;
              .content {
              }
            }
            .introduction {
              display: flex;
              font-size: 1rem;
              color: #72777b;
              overflow: hidden;
              align-items: baseline;
            }
          }
        }
        // 编辑信息
        .to_change_info {
          display: flex;
          align-items: flex-end;
          justify-content: center;
          // width: 5rem;
          .small_info_box {
            display: none;
          }
        }
      }
      .user_content {
        margin-top: 1rem;
        background-color: #ffffff;
      }
    }
    .right_wrapper {
      flex: 1;
      // height: 10rem;
      // background-color: #ffffff;
    }
  }
}

@media screen and (max-width: 960px) {
  .user .user_wrapper .left_wrapper {
    width: 100%;
    margin: 0;
  }
  .user .user_wrapper .right_wrapper {
    display: none;
  }
}
@media screen and(max-width: 600px) {
  .userinfo_box {
    flex-direction: column;
    align-items: center;
    .username {
      margin-top: 1rem;
      text-align: center;
    }
    .email {
      justify-content: center;
    }
    .iconfont {
      display: none;
    }
  }

  .introduction {
    margin-top: 0.5rem;

    justify-content: center;
  }

  .to_change_info {
    margin-top: 1rem;
    .large_info_box {
      display: none;
    }
  }
  .user
    .user_wrapper
    .left_wrapper
    .userinfo_box
    .to_change_info
    .small_info_box {
    display: flex;
    flex-direction: row;
    width: 15rem;
    justify-content: space-between;
    .followee_box {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
    }
    .follower_box {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
    }
    .small_info_btn {
      display: flex;
      justify-content: center;
      align-items: flex-end;
      flex: 1;
    }
  }
}
</style>